<template>
  <!-- 智能综采 -->
  <div class="excavation">
    <layout-box :is-leave="isLeave">
      <!-- 页面左侧 -->
      <div slot="left" class="layout-box-con">
        <LeftIndexVue />
        <BarVue :barData="barLists" class="layout-box-bar" />
      </div>
      <!-- 页面右侧 -->
      <div slot="right" class="layout-box-con">
        <VideoBarVue :videoLists="videoLists" />
        <RightIndexVue class="layout-box-bar" />
      </div>
    </layout-box>
    <bottom/>
  </div>
</template>

<script>
// 左右分栏布局
import LayoutBox from '@/components/LayoutBox.vue';
// 引入左右两栏模块
import LeftIndexVue from '../left/Index.vue';
import RightIndexVue from '../right/Index.vue';
import BarVue from '@/components/EnvBar.vue';
import VideoBarVue from '@/components/VideoBar.vue';
import Bottom from '../common/Bottom.vue';

import { videoInfo, barInfo } from '../common/titles';
export default {

  name: 'Mining',

  components: {
    LayoutBox,
    LeftIndexVue,
    RightIndexVue,
    BarVue,
    VideoBarVue,
    Bottom
  },
  data() {
    return {
      isLeave: false,
      time: null,
      videoInfo: {},
      barInfo: {}
    };
  },
  computed: {
    routeId() {
      return this.$route.params.id;
    },
    videoLists() {
      return this.videoInfo[this.routeId];
    },
    barLists() {
      return this.barInfo[this.routeId];
    }
  },
  mounted() {
    this.videoInfo = videoInfo;
    this.barInfo = barInfo;
  },
  // 页面的退场动画
  beforeRouteLeave(to, from, next) {
    this.isLeave = true;
    this.time = setTimeout(() => {
      next();
    }, 1000);
  },
  beforeDestroy() {
    clearTimeout(this.time);
    this.time = null;
  }
};
</script>

<style lang='scss' scoped>
.layout-box-con{
  display: flex;
  .layout-box-bar{
    margin-left:.625rem;
  }
}
</style>
